<template>
  <el-sub-menu v-if="item.children.length!==0" :index="item.path">
    <template #title>
      <el-icon>
        <component :is="item.icon"/>
      </el-icon>
      <span>{{ item.text }}</span>
    </template>
    <menu-item :item="o" v-for="(o,index) in item.children" :key="o.path"></menu-item>
  </el-sub-menu>
  <el-menu-item v-else :index="item.path">
    <el-icon>
      <component :is="item.icon"/>
    </el-icon>
    <template #title>{{ item.text }}</template>
  </el-menu-item>
</template>
<script>
import {
  ArrowDown,
  Expand,
  Fold,
  Failed,
  User,
  Histogram,
  DataLine,
  PieChart,
  HomeFilled,
  Document,
  Menu as IconMenu,
  Location,
  Setting, NoSmoking,
} from '@element-plus/icons-vue'

export default {
  name: "MenuItem",
  props: ['item'],
  components: {
    NoSmoking,
    ArrowDown,
    Expand,
    Fold,
    Failed,
    User,
    Histogram,
    DataLine,
    PieChart,
    HomeFilled,
    Document,
    IconMenu,
    Location,
    Setting
  }
}
</script>

<style scoped>

</style>